<template>
	<view class="container">
		<u-notice-bar mode="horizontal" :list="noticeList" type="none"></u-notice-bar>
		<view class="body">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in listData" :key="key">
					<view class="uni-media-list">
						
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top example-body">
								<text class="list-text">
									{{ value.name }} 
								</text>
								<text class="location">
									{{ value.create_time }}
								</text>
							</view>
							<view class="image-box">
								<view>
									<u-image @click="previewImage(value.before_img)" :src="value.before_img" width="200" height="200" border-radius="10" mode="aspectFill">
										<u-loading slot="loading"></u-loading>
									</u-image>
								</view>
								
								<view>
									<view>
										<u-icon name="arrow-leftward" label="制作前" label-pos="top" size="60" color="#f1f1f1"></u-icon>
									</view>
									<view>
										<u-icon name="arrow-rightward" label="制作后" label-pos="bottom" size="60" color="#f1f1f1"></u-icon>
									</view>
								</view>
								
								<view>
									<video v-if="getSuffix(value.after_img) == 'mp4'" :src="value.after_img" :loop="true" style="width: 200rpx;height: 200rpx;"></video>
									<u-image v-else @click="previewImage(value.before_img)" :src="value.after_img" width="200" height="200" border-radius="10" mode="aspectFill">
										<u-loading slot="loading"></u-loading>
									</u-image>
								</view>
								
							</view>
						</view>
					</view>
					
				</view>
			</view>
			
			<view style="padding: 20rpx;">
				<u-loadmore :status="status" :load-text="contentText" @loadmore="getList()"/>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [],
				last_id: 0,
				maxNumber: 1, //最后一页
				reload: false,
				
				status: 'loadmore',
				contentText: {
					loadmore: '点击或上拉加载更多',
					loading: '加载中',
					nomore: '没有更多了'
				},
				
				noticeList: [
					'长按可删除使用记录，点击图片可查看或保存'
				],
			}
		},
		methods: {
			// 获取记录列表
			getList() {
				
			},
			previewImage(img) {
				let that = this;
				uni.previewImage({
					urls: [img],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getSuffix(url){
				return url.substring(url.lastIndexOf('.') + 1, url.length);
			}
		},
		onLoad() {
			this.getList();
		},
		// 加载更多
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.container {
		font-size: 14px;
		line-height: 24px;
	}
	
	/* 列表显示 */
	.uni-list {
		background-color: #FFFFFF;
		position: relative;
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	.uni-list-cell {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
	}
	.uni-media-list {
		padding: 20rpx;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		width: 100%;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
	}

	.uni-media-list-body {
		height: 84rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-box-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		overflow: hidden;
	}

	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
		.example-body{
			padding: 0rpx;
		}
		.location{
			flex: 1;
			text-align: right;
		}
	}
	.uni-media-list-text-top {
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;

	}
	.uni-media-list-text-bottom {
		width: 100%;
		line-height: 40rpx;
		font-size: 26rpx;
		color: #8f8f94;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	
	}
	.image-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		align-items: center;
	}
	
	.page-content-box{
		background: #FFFFFF;
		border-radius: 15rpx;
		overflow: hidden;
		box-shadow: rgba(15, 66, 76, 0.25) 0 0 15rpx 0;
	}
	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 40upx;
		height: 110upx;
		background: #fff;
		.tit{
			flex-shrink: 0;
			width: 135upx;
			margin-right: 20rpx;
			
			.upload-btn{
				width: 90rpx;
				height: 90rpx;
				background-color: #F0F0F0;
				padding-top: 15rpx;
				border-radius: 10rpx;
				
				display: table-cell;    
				vertical-align: middle;    
				text-align: center;       
			}
		}
		.input{
			flex: 1;
		}
		
		.energy{
			width: 55rpx;
			height: 35rpx;
			vertical-align: middle;
			-webkit-align-self: center;
			align-self: center;
			margin-right: 20rpx;
			image{
				width: 55rpx;
				height: 35rpx;
				display: block;
	
			}
		}
		
		.plate-select{
			background-color: F0AD4E;
			color: #fff;
			padding-right: 10rpx
		}
	}
	.b-b::after, .b-t::after{
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		height: 0;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		border-bottom: 1px solid #E4E7ED;
	}
	.b-b::after {
		bottom: 0;
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		
		background-color: #ffffff;
		font-size: 28rpx;
		.sub{
			border-radius: 50rpx;
			background-color: red;
			color: #fff;
		}
	}
	.bottom button {
		height: 88rpx;
		line-height: 88rpx;
	}
</style>
